<template>
    <view class="bg-[#F3F5F9] min-h-screen">
        <up-navbar title="消费补助金" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="mx-[30rpx] my-[24rpx] rounded-[8rpx] px-[30rpx] blurBg">
            <view class="py-[30rpx]">
                <view class="text-[26rpx] text-[#fff] font-bold mb-[24rpx]">消费补助金(资金额度)</view>
                <view class="text-[48rpx] text-[#fff] font-bold">{{ consumption.dayReturnAmountTotal }}</view>
            </view>
            <up-line color="#fff"></up-line>
            <view class="py-[30rpx]">
                <view class="mb-[20rpx] flex just-between">
                    <view class="flex items-center flex-1">
                        <view class="text-[26rpx] text-[#fff] font-normal mr-[12rpx]">今日入池</view>
                        <view class="bg-[#46A7FD] rounded-[18rpx] h-[36rpx] flex items-center pr-[22rpx]">
                            <image src="../static/up.png" mode="scaleToFill" class="ml-[12rpx] w-[24rpx] h-[24rpx] block mr-[12rpx]"/>
                            <view class="text-[22rpx] text-[#fff] font-normal mr-[22rpx]">{{ consumption.dayReturnAmount ? community.dayAddRate : '0.00%'}}</view>
                        </view>
                    </view>
                    <view class="flex items-center flex-1">
                        <view class="text-[26rpx] text-[#fff] font-normal mr-[12rpx]">今日收益</view>
                        <view class="bg-[#46A7FD] rounded-[18rpx] h-[36rpx] flex items-center pr-[22rpx]">
                            <image src="../static/down.png" mode="scaleToFill" class="ml-[12rpx] w-[24rpx] h-[24rpx] block mr-[12rpx]"/>
                            <view class="text-[22rpx] text-[#fff] font-normal ">{{ consumption.dayTotalRate ? consumption.dayTotalRate : '0.00%'}}</view>
                        </view>
                    </view>
                </view>
                <view class="flex justify-between">
                    <view class="flex-1 text-[32rpx] text-[#fff] font-normal">{{ consumption.dayAdd }}</view>
                    <view class="flex-1 text-[32rpx] text-[#fff] font-normal">{{ consumption.dayTotal }}</view>
                </view>
            </view>
        </view>
        <view class="mx-[30rpx] my-[24rpx]">
            <image src="../static/img.png" mode="scaleToFill" class="w-[100%] h-[144rpx] block rounded-[8rpx]"/>
        </view>
        <template v-if="list.length">
            <view class="mx-[30rpx] my-[24rpx] rounded-[8rpx] bg-[#fff]" v-for="(item,index) in list" :key="index">
                <view class="px-[28rpx] py-[24rpx] flex items-center justify-between">
                    <view class="mr-[24rpx] flex items-center">
                        <up-image :src="baseUrl + item.pic" width="76rpx" height="76rpx" radius="38"></up-image>
                        <view class="text-[#1B2128] text-[28rpx] font-normal ml-[24rpx]">{{ item.storeName }}</view>
                    </view>
                    <view class="py-[16rpx] px-[20rpx] bg-[#ECF6FF] flex rounded-[20rpx] border-[1rpx] border-[#46A7FD]">
                        <image src="../static/calendar.png" mode="scaleToFill" class="w-[36rpx] h-[36rpx] block mr-[8rpx]"/>
                        <view class="text-[28rpx] text-[#46a7fd] font-normal">{{ item.createTime }}</view>
                    </view>
                </view>
                <up-line></up-line>
                <view>
                    <view class="p-[24rpx] flex justify-between items-start">
                        <view class="text-[28rpx] text-[#959595]">营业状态</view>
                        <view class="bg-[#E9FFEF] rounded-[108rpx] py-[8rpx] px-[16rpx] flex items-center">
                            <view class="bg-[#409261] w-[14rpx] h-[14rpx] rounded-[50%] mr-[14rpx]"></view>
                            <view class="text-[#409261] text-[24rpx] font-normal">营业中</view>
                        </view>
                    </view>
                    <view class="p-[24rpx] flex justify-between items-center">
                        <view class="text-[28rpx] text-[#959595]">购买店铺</view>
                        <view class="text-[28rpx] text-[#1b2128] font-normal">￥{{ item.dayAdd }}</view>
                    </view>
                    <view class="p-[24rpx] flex justify-between items-center">
                        <view class="text-[28rpx] text-[#959595]">订单编号</view>
                        <view class="text-[28rpx] text-[#1b2128] font-normal">{{ item.orderSn }}</view>
                    </view>
                    <view class="p-[24rpx] flex justify-between items-center">
                        <view class="text-[28rpx] text-[#959595]">支付金额</view>
                        <view class="text-[28rpx] text-[#1b2128] font-normal">{{ item.orderPrice }}</view>
                    </view>
                    <view class="p-[24rpx] flex justify-between items-center">
                        <view class="text-[28rpx] text-[#959595]">补贴金额</view>
                        <view class="text-[28rpx] text-[#1b2128] font-normal">{{ item.receiveAmount }}</view>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad , onReachBottom , onShow } from '@dcloudio/uni-app';
import { GetStoreInfo, GetTenementFundPool } from '../../API/rebate';
const { consumption , list , getList , getConsumption } = useList()
const { goback , gohome } = useTable()
function useTable(){
    const goback = () => {
        uni.navigateBack()
    }
    const gohome = () => {
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return {
        goback,
        gohome
    }
}
function useList(){
    const consumption = ref({})
    const list = ref([])
    const pageObj = reactive({
        pageNum:1,
        pageSize:10
    })
    const getList = async () => {
        let { rows , total } = await GetTenementFundPool(pageObj)
        list.value = rows
    }
    const getConsumption = async ()=>{
        let { data } = await GetStoreInfo()
        consumption.value = data
    }
    return { consumption , list , getList , getConsumption }
}
onLoad( async ()=>{
    await getList()
    await getConsumption()
})
</script>

<style lang="scss" scoped>
.blurBg{
    background: linear-gradient( 90deg, #5578F3 0%, #69A7F6 100%);
}
</style>